<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数独小游戏</title>
    <link th:href="@{/css/i-sudoku.css}" type="text/css" rel="stylesheet">

</head>
<body>
    <div class="panel">
        <h3>由Foryang个人制作</h3>
        <h3>操作说明：</h3>
        <p>1、点击九宫格中的空白格子选中该格子</p>
        <p>2、点击九宫格下面的数字在所选中的格子中填入对应的数字</p>
        <p>3、将所有格子填写完整后点击下面的“提交答案”框</p>
        <p>注：填入答案错误次数到达两次则游戏失败</p>
        <h3>规则：</h3>
        <p>一个空格仅允许填入1-9其中一个数且在同一行、同一列和同一个小的九宫格内不能重复</p>
    </div>
    <div class="model-background hide"></div>
    <div class="model success hide">
        <p>恭喜通关</p>
        <div class="button-container">
            <div class="restart pointer">重玩此难度</div>
            <div class="next pointer">下一关</div>
        </div>
    </div>
    <div class="model fail hide">
        <p>游戏失败</p>
        <div class="button-container fail-container">
            <div class="restart pointer">重玩此难度</div>
        </div>
    </div>
    <div class="model post hide">
        <p>确定要提交答案吗</p>
        <div class="button-container">
            <div class="cancel pointer">取消</div>
            <div class="define pointer">确定</div>
        </div>
    </div>
    <h2 class="text">第一关</h2>
    <h4 class="error-num"></h4>
    <div class="container">
        <div class="container-row container-row1">
            <div class="container-cell top-border left-border right-bottom-border">

            </div>
            <div class="container-cell top-border right-bottom-border">

            </div>
            <div class="container-cell top-border right-bottom-border">

            </div>
        </div>
        <div class="container-row">
            <div class="container-cell left-border right-bottom-border">

            </div>
            <div class="container-cell right-bottom-border">

            </div>
            <div class="container-cell right-bottom-border">

            </div>
        </div>
        <div class="container-row">
            <div class="container-cell left-border right-bottom-border">

            </div>
            <div class="container-cell right-bottom-border">

            </div>
            <div class="container-cell right-bottom-border">

            </div>
        </div>
    </div>
    <div class="num-container">
        <div class="num pointer">1</div>
        <div class="num pointer">2</div>
        <div class="num pointer">3</div>
        <div class="num pointer">4</div>
        <div class="num pointer">5</div>
        <div class="num pointer">6</div>
        <div class="num pointer">7</div>
        <div class="num pointer">8</div>
        <div class="num pointer">9</div>
    </div>
    <div class="post-button pointer">提交答案</div>
</body>
<script th:src="@{/js/jquery-3.3.1.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script>
    let roundNum = 1;
    let errorNum = 0;
    $('.text').text("第" + roundNum + "关");
    $('.error-num').text("错误次数：" + errorNum +"/2");
</script>
<script th:inline="javascript">
    let array = [9][9];
    let url = /*[[@{/get}]]*/"";
    axios.get(url + "/" + roundNum)
        .then(res=>{
            initGame(res.data);
        });

    function initGame(arr){
        array = arr;
        $('.container-cell').empty()
        for(let i = 0; i < arr.length; i++){
            for (let j = 0; j< arr[i].length; j++){
                let row = parseInt(i / 3);
                let cell = parseInt(j / 3);
                let box = $("<div class='numBox'></div>").text(arr[i][j] > 0 ? arr[i][j] : "");
                if(arr[i][j] == 0){
                    box.addClass('write-text-color').addClass('pointer');
                    box.click(() => {
                        $('.choose-border').removeClass('choose-border');
                        box.addClass('choose-border');
                        $('.num').unbind('click').click(function () {
                            let writeNum = $(this).text();
                            let flag = checkNum(writeNum,i,j);
                            if(!flag){
                                box.addClass('err-write');
                                box.text(writeNum);
                                array[i][j] = parseInt(writeNum);
                                errorNum = errorNum + 1;
                                $('.error-num').text("错误次数：" + errorNum +"/2");
                                if(errorNum == 2){
                                    $('.model-background').removeClass('hide');
                                    $('.fail').removeClass('hide');
                                }
                            } else {
                                box.removeClass('err-write');
                                box.text(writeNum);
                                array[i][j] = parseInt(writeNum);
                            }
                        });
                    })
                }
                let num_container = $('.container-row')[row].children[cell];
                $(num_container).append(box)
            }
        }
    }


    let checkNum = (num, x, y) =>{
        if(num == ""){
            return true;
        }
        for (let i = 0; i < 9; i++){
            if(i == y){
                continue;
            }
            if(array[x][i] == num){
                return false;
            }
        }

        for (let j = 0; j < 9; j++){
            if(j == x){
                continue;
            }
            if(array[j][y] == num){
                return false;
            }
        }

        let xBox = parseInt(x / 3) * 3;
        let yBox = parseInt(y / 3) * 3;
        for (let i = xBox; i <= xBox + 2; i++){
            for (let j = yBox; j <= yBox + 2; j++){
                if(i == x && y == j){
                    continue;
                }
                if(array[i][j] == num){
                    return false;
                }
            }
        }
        return true;
    }


    $('.post-button').click(() =>{
        $('.model-background').removeClass('hide');
        $('.post').removeClass('hide')
    });

    $('.cancel').click(() =>{
        $('.cancel').parent().parent().addClass('hide');
        $('.model-background').addClass('hide');
    });

    $('.define').click(() =>{
        $('.define').parent().parent().addClass('hide');
        axios.post( /*[[@{/check}]]*/"",JSON.stringify(array),{
            headers:{
                'Content-Type' : 'application/json;charset=utf-8'
            }
        })
        .then(res => {
            if(res.data == false){
                $('.fail').removeClass('hide');
            } else {
                $('.success').removeClass('hide');
            }
        });
    });

    $('.restart').click(() =>{
        $('.model').addClass('hide');
        axios.get(url + "/" + roundNum)
        .then(res =>{
            if(res.status == 200){
                $('.model-background').addClass('hide');
                initGame(res.data);
                errorNum = 0;
                $('.error-num').text("错误次数：" + errorNum +"/2");
            } else {
                let flag = confirm("加载失败，请刷新页面");
                if(flag){
                    location.reload();
                }
            }
        })
    });

    $('.next').click(() =>{
        $('.model').addClass('hide');
        roundNum = roundNum + 1;
        let diff = roundNum > 10 ? 10 : roundNum
        axios.get(url + "/" + diff)
            .then(res =>{
                if(res.status == 200){
                    $('.model-background').addClass('hide');
                    $('.text').text("第" + roundNum + "关");
                    initGame(res.data);
                    errorNum = 0;
                    $('.error-num').text("错误次数：" + errorNum +"/2");
                } else {
                    let flag = confirm("加载失败，请刷新页面");
                    if(flag){
                        $('.model-background').addClass('hide');
                        location.reload();
                    }
                }
            })
    });

</script>
</html>